<template>
	<view class="content">
		<empty v-if="goodsList.length==0"></empty>
		<view class="order-list">
			<view class="order-item" v-for="(item, index) in goodsList" :key="index">
						<!-- <view class="i-top b-b">
							<text class="time"><span>2019-04-06 11:37</span></text>
							<text class="state" style="color: rgb(250, 67, 106);"><span>待付款</span></text>
						</view> -->


						<view v-if='item.imgList.length === 1'>
							<view class="goods-box-single">
								<image class="goods-img" :src="item.imgList[0].url" mode="aspectFill"></image>
								<view class="right">
									<text class="title clamp"><span>{{item.spuName}}</span></text>
									<text class="attr-box"><span>&nbsp;</span></text>
									<text class="price">
										共
										<text class="num"><span>{{item.total}}</span></text>
										件商品 实付积分
										<text class="price"><span>{{item.amount}}积分</span></text>
									</text>
								</view>
							</view>
						</view>
						<view v-else>
							<view class='listTitle'>综合商品</view>
							<view class='flex'>
								<view class='image'>
									<block v-for="(val, index) in item.imgList.slice(0,3)" :key=index>
										<image class="goods-img" :src="val.url" mode="aspectFill"></image>
									</block>
									<view class='ellipsis' v-if="item.imgList.length > 3">...</view>
								</view>
								<view class='listShop'>
									<view>实付<span class='num'> {{ item.amount }} </span>积分</view>
									<view>共<span class='num'> {{ item.total }} </span>件</view>
								</view>
							</view>
						<view>
					</view>
				</view>
						<!-- <view class="price-box">
							共
							<text class="num"><span>1</span></text>
							件商品 实付款
							<text class="price"><span>{{item.amount}}积分</span></text>
						</view> -->
						<view class="action-box b-t">
							<text class="time"><span>{{item.createDate}}</span></text>
							<button v-if="item.status == 'YES'" class="action-btn">已兑换</button>
							<button @click="toggleSpec(item)" v-if="item.status == 'NO'" class="action-btn recom">福利码</button>
							<button @click="infoAction(item)" class="action-btn info">查详情</button>
						</view>
					</view>
			<!-- 规格-模态层弹窗 -->

		</view>
		<view
			class="popup spec"
			:class="specClass"
			@touchmove.stop.prevent="stopPrevent"
			@click="toggleSpec"
		>
			<!-- 遮罩层 -->
			<view class="mask"></view>
			<view class="layer attr-content" @click.stop="stopPrevent">
				<view class="out-style">
					<view class="shop-outside">
						<view class="shop-info">
							<span>{{qrCodeInfo.spuName}}</span>
							<!-- <span>￥</span>
							<span>123</span>
							<span>214</span> -->
						</view>
						<view class="code-div">
							<view class="qrcode-item">
								<canvas canvas-id="qrcode" style="margin: auto;width: 230px;height: 230px;border-radius: 5px;" />
							</view>
						</view>
						<view class="text-style">
							<span>请出示福利码进行核销</span>
						</view>
					</view>
				</view>
			</view>
		</view>
		<uni-tabbar class="uni-tabbar-bottom" style="">
			<div class="uni-tabbar" style="background-color: rgb(255, 255, 255);">
				<div class="uni-tabbar__item" @click="homeBtn">
					<!---->
					<div class="uni-tabbar__bd" style="height: 50px;">
						<div class="uni-tabbar__icon" style="width: 24px; height: 24px;">
							<img src="/sstshop/static/tab-home.png" />
							<!---->
						</div>
						<div class="uni-tabbar__label" style=" font-size: 10px; line-height: normal; margin-top: 3px;">
							首页
							<!---->
						</div>
					</div>
				</div>
				<div class="uni-tabbar__item" @click="cartBtn">
					<!---->
					<div class="uni-tabbar__bd" style="height: 50px;">
						<div class="uni-tabbar__icon" style="width: 24px; height: 24px;">
							<img src="/sstshop/static/tab-cart.png" />
							<!---->
						</div>
						<div class="uni-tabbar__label" style="color: font-size: 10px; line-height: normal; margin-top: 3px;">
							购物车
							<!---->
						</div>
					</div>
				</div>
				<div class="uni-tabbar__item" @click="userBtn">
					<!---->
					<div class="uni-tabbar__bd" style="height: 50px;">
						<div class="uni-tabbar__icon" style="width: 24px; height: 24px;">
							<img src="/sstshop/static/tab-my.png" />
							<!---->
						</div>
						<div class="uni-tabbar__label" style="font-size: 10px; line-height: normal; margin-top: 3px;">
							我的
							<!---->
						</div>
					</div>
				</div>
			</div>
			<div class="uni-placeholder" style="height: 50px;"></div>
		</uni-tabbar>
	</view>
</template>

<script>
import { selectUserIntegralReciveRecordList, getOpenidMsg, updateVerification, selectUserIntegralReciveRecordById } from 'api/shop';
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
import empty from '@/components/empty';
import uQRCode from '@/js_sdk/Sansnn-uQRCode/uqrcode.js'
import Json from '@/Json';
export default {
	components: {
		uniLoadMore,
		empty
	},
	data() {
		return {
			buyInfo:[],
			formItem:{},
			shopList:[],
			shopId:'',
			totalNum:'0',
			userInfo:{
				mobile:'',
				name:''
			},
			goodsList:[],
			modalName: null,
			qrCodeInfo:{},
			dataList:[],
			specClass: 'none',
			specInfoClass:'none',
			item:{},
			orderInfo:{}
		};
	},

	onLoad(options) {
		this.getOpenidMsgAction();
	},

	methods: {
		homeBtn(){
			uni.switchTab({
				url: '/pages/index/index'
			})
		},
		cartBtn(){
			uni.switchTab({
				url: '/pages/cart/cart'
			})
		},
		userBtn(){
			uni.switchTab({
				url: '/pages/user/user'
			})
		},
		infoAction(item){
			//测试数据没有写id，用title代替
			let id = item.batch;
			uni.navigateTo({
				url: `/pages/order/orderInfoJf?id=`+id
			})
		},
		toggleSpecInfo(data) {
			if(this.specInfoClass === 'show'){
				this.specInfoClass = 'hide';
				setTimeout(() => {
					this.specInfoClass = 'none';
				}, 250);
			}else if(this.specInfoClass === 'none'){
				this.specInfoClass = 'show';
				console.log('123')
				selectUserIntegralReciveRecordById({id:data.id}).then(ret => {
					if (ret.data.errcode === 0) {
						this.orderInfo = ret.data.data
						this.orderInfo.imgurl = ret.data.data.imgList[0].url
					} else {
						this.$api.msg(ret.data.errmsg);
						return false
					}
				})
			}
		},
		//规格弹窗开关
		toggleSpec(data) {
			if(this.specClass === 'show'){
				this.specClass = 'hide';
				setTimeout(() => {
					this.specClass = 'none';
				}, 250);
			}else if(this.specClass === 'none'){
				this.specClass = 'show';
				this.qrcode(data)
			}
		},
		qrcode(data){
			this.qrCodeInfo = data
			uQRCode.make({
				canvasId: 'qrcode',
				componentInstance: this,
				text: 'jfjf:'+data.id,
				size: 230,
				margin: 20,
				backgroundColor: '#ffffff',
				foregroundColor: '#000000',
				fileType: 'jpg',
				correctLevel: uQRCode.defaults.correctLevel,
				success: res => {
				  // console.log(res)
				}
			  })
		},
		handle () {
		  // window.navigator.userAgent属性包含了浏览器类型、版本、操作系统类型、浏览器引擎类型等信息，这个属性可以用来判断浏览器类型
		  let ua = window.navigator.userAgent.toLowerCase()
		  // 通过正则表达式匹配ua中是否含有MicroMessenger字符串
		  if (ua.match(/MicroMessenger/i) == 'micromessenger') {
      //是微信浏览器
      window.location.href = this.$xeUtils.locat().origin + '/yq/#/handle-submit'
			// window.location.href = 'https://shengst.tripln.top/subsidy/#/city-card-handle'
		  } else {
			window.location.href = 'https://shengst.tripln.top/subsidy/#/city-card-handle-app'
		  }
		},
		getOpenidMsgAction () {
		  getOpenidMsg().then(ret => {
			if (ret.data.errcode === 0) {
			  let data = ret.data.data.result
			  if (data) {
				if (data.cardNo === null || data.cardNo === '' || data.cardNo === undefined) {
					this.handle()
				} else {
					this.userInfo = data
					this.init(data.cardNo)
				}
			  } else {
				console.log('没有此人信息')
				this.handle()
			  }
			} else if (ret.data.errcode === 9999 || ret.data.errcode === 9991) {
			  this.handle()
			} else {
				this.$api.msg(ret.data.errmsg);
				return false
			}
		  })
		},
		//时间戳转换
		formatDate(date) {
		  var date = new Date(date);
		  var YY = date.getFullYear() + '-';
		  var MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
		  var DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate());
		  var hh = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
		  var mm = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
		  var ss = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
		  return YY + MM + DD +' '+ hh + mm + ss;
		},
		init(cardNo) {
			selectUserIntegralReciveRecordList({'idCard':cardNo,brandId: localStorage.getItem("brandId")}).then(ret => {
				if (ret.data.errcode === 0) {
					this.goodsList = ret.data.data.result
					for (var i = 0; i < this.goodsList.length; i++) {
						if(this.goodsList[i].createDate){
							this.goodsList[i].createDate = this.formatDate(this.goodsList[i].createDate)
						}
					}
				} else {
					this.$api.msg(ret.data.errmsg);
					return false;
				}
			});
		},
		//取消订单
		cancelOrder(item) {
			uni.showLoading({
				title: '请稍后'
			});
			setTimeout(() => {
				let { stateTip, stateTipColor } = this.orderStateExp(9);
				item = Object.assign(item, {
					state: 9,
					stateTip,
					stateTipColor
				});

				//取消订单后删除待付款中该项
				let list = this.navList[1].orderList;
				let index = list.findIndex(val => val.id === item.id);
				index !== -1 && list.splice(index, 1);

				uni.hideLoading();
			}, 600);
		},

		//订单状态文字和颜色
		orderStateExp(state) {
			let stateTip = '',
				stateTipColor = '#fa436a';
			switch (+state) {
				case 1:
					stateTip = '待付款';
					break;
				case 2:
					stateTip = '待发货';
					break;
				case 9:
					stateTip = '订单已关闭';
					stateTipColor = '#909399';
					break;

				//更多自定义
			}
			return { stateTip, stateTipColor };
		}
	}
};
</script>

<style lang="scss">
page,
.content {
	background: $page-color-base;
	height: 100%;
}

.swiper-box {
	height: calc(100% - 40px);
}
.list-scroll-content {
	height: 100%;
}

.navbar {
	display: flex;
	height: 40px;
	padding: 0 5px;
	background: #fff;
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
	position: relative;
	z-index: 10;
	.nav-item {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
		font-size: 15px;
		color: $font-color-dark;
		position: relative;
		&.current {
			color: $base-color;
			&:after {
				content: '';
				position: absolute;
				left: 50%;
				bottom: 0;
				transform: translateX(-50%);
				width: 44px;
				height: 0;
				border-bottom: 2px solid $base-color;
			}
		}
	}
}

.uni-swiper-item {
	height: auto;
}
.order-item {
	display: flex;
	flex-direction: column;
	padding-left: 30upx;
	background: #fff;
	margin-top: 16upx;
	.i-top {
		display: flex;
		align-items: center;
		height: 80upx;
		padding-right: 30upx;
		font-size: $font-base;
		color: $font-color-dark;
		position: relative;
		.time {
			flex: 1;
		}
		.state {
			color: $base-color;
		}
		.del-btn {
			padding: 10upx 0 10upx 36upx;
			font-size: $font-lg;
			color: $font-color-light;
			position: relative;
			&:after {
				content: '';
				width: 0;
				height: 30upx;
				border-left: 1px solid $border-color-dark;
				position: absolute;
				left: 20upx;
				top: 50%;
				transform: translateY(-50%);
			}
		}
	}
	/* 多条商品 */
	.goods-box {
		height: 160upx;
		padding: 20upx 0;
		white-space: nowrap;
		.goods-item {
			width: 120upx;
			height: 120upx;
			display: inline-block;
			margin-right: 24upx;
		}
		.goods-img {
			display: block;
			width: 100%;
			height: 100%;
		}
	}
	/* 单条商品 */
	.goods-box-single {
		display: flex;
		padding: 20upx 0;
		.goods-img {
			display: block;
			width: 120upx;
			height: 120upx;
		}
		.right {
			flex: 1;
			display: flex;
			flex-direction: column;
			padding: 0 30upx 0 24upx;
			overflow: hidden;
			.title {
				font-size: $font-base + 2upx;
				color: $font-color-dark;
				line-height: 1;
			}
			.attr-box {
				font-size: $font-sm + 2upx;
				color: $font-color-light;
				padding: 10upx 12upx;
			}
			.price {
				font-size: $font-sm + 2upx;
				color: $font-color-light;
				&:before {
					// content: '￥';
					font-size: $font-sm;
					margin: 0 2upx 0 8upx;
				}
				span{
					color: #fa436a;
				}
			}
		}
	}

	.price-box {
		display: flex;
		justify-content: flex-end;
		align-items: baseline;
		padding: 20upx 30upx;
		font-size: $font-sm + 2upx;
		color: $font-color-light;
		.num {
			margin: 0 8upx;
			color: $font-color-dark;
		}
		.price {
			font-size: $font-lg;
			color: #fa436a;
			&:before {
				// content: '￥';
				font-size: $font-sm;
				margin: 0 2upx 0 8upx;
			}
		}
	}
	.action-box {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		height: 100upx;
		position: relative;
		padding-right: 30upx;
	}
	.action-btn {
		width: 160upx;
		height: 60upx;
		margin: 0;
		margin-left: 24upx;
		padding: 0;
		text-align: center;
		line-height: 60upx;
		font-size: $font-sm + 2upx;
		color: $font-color-dark;
		background: #fff;
		border-radius: 100px;
		&:after {
			border-radius: 100px;
		}
		&.recom {
			// background: #fff9f9;
			color: $base-color;
			&:after {
				border-color: #f7bcc8;
			}
		}
		&.info {
			// background: #F5F5F5;
			color: #8dc1e9;
			&:after {
				border-color: #8dc1e9;
			}
		}
	}
}

/* load-more */
.uni-load-more {
	display: flex;
	flex-direction: row;
	height: 80upx;
	align-items: center;
	justify-content: center;
}

.uni-load-more__text {
	font-size: 28upx;
	color: #999;
}

.uni-load-more__img {
	height: 24px;
	width: 24px;
	margin-right: 10px;
}

.uni-load-more__img > view {
	position: absolute;
}

.uni-load-more__img > view view {
	width: 6px;
	height: 2px;
	border-top-left-radius: 1px;
	border-bottom-left-radius: 1px;
	background: #999;
	position: absolute;
	opacity: 0.2;
	transform-origin: 50%;
	animation: load 1.56s ease infinite;
}

.uni-load-more__img > view view:nth-child(1) {
	transform: rotate(90deg);
	top: 2px;
	left: 9px;
}

.uni-load-more__img > view view:nth-child(2) {
	transform: rotate(180deg);
	top: 11px;
	right: 0;
}

.uni-load-more__img > view view:nth-child(3) {
	transform: rotate(270deg);
	bottom: 2px;
	left: 9px;
}

.uni-load-more__img > view view:nth-child(4) {
	top: 11px;
	left: 0;
}

.load1,
.load2,
.load3 {
	height: 24px;
	width: 24px;
}

.load2 {
	transform: rotate(30deg);
}

.load3 {
	transform: rotate(60deg);
}

.load1 view:nth-child(1) {
	animation-delay: 0s;
}

.load2 view:nth-child(1) {
	animation-delay: 0.13s;
}

.load3 view:nth-child(1) {
	animation-delay: 0.26s;
}

.load1 view:nth-child(2) {
	animation-delay: 0.39s;
}

.load2 view:nth-child(2) {
	animation-delay: 0.52s;
}

.load3 view:nth-child(2) {
	animation-delay: 0.65s;
}

.load1 view:nth-child(3) {
	animation-delay: 0.78s;
}

.load2 view:nth-child(3) {
	animation-delay: 0.91s;
}

.load3 view:nth-child(3) {
	animation-delay: 1.04s;
}

.load1 view:nth-child(4) {
	animation-delay: 1.17s;
}

.load2 view:nth-child(4) {
	animation-delay: 1.3s;
}

.load3 view:nth-child(4) {
	animation-delay: 1.43s;
}

@-webkit-keyframes load {
	0% {
		opacity: 1;
	}

	100% {
		opacity: 0.2;
	}
}

/*  弹出层 */
	.popup {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 99;

		&.show {
			display: block;
			.mask{
				animation: showPopup 0.2s linear both;
			}
			.layer {
				animation: showLayer 0.2s linear both;
			}
		}
		&.hide {
			.mask{
				animation: hidePopup 0.2s linear both;
			}
			.layer {
				animation: hideLayer 0.2s linear both;
			}
		}
		&.none {
			display: none;
		}
		.mask{
			position: fixed;
			top: 0;
			width: 100%;
			height: 100%;
			z-index: 1;
			background-color: rgba(0, 0, 0, 0.4);
		}
		.layer {
			padding: 10%;
			text-align: center;
			position: fixed;
			font-size: 16px;
			z-index: 99;
			bottom: 0;
			width: 100%;
			min-height: 50vh;
			border-radius: 10upx 10upx 0 0;
			background-color: #fff;
			.btn{
				height: 66upx;
				line-height: 66upx;
				border-radius: 100upx;
				background: $uni-color-primary;
				font-size: $font-base + 2upx;
				color: #fff;
				margin: 30upx auto 20upx;
			}
		}
		@keyframes showPopup {
			0% {
				opacity: 0;
			}
			100% {
				opacity: 1;
			}
		}
		@keyframes hidePopup {
			0% {
				opacity: 1;
			}
			100% {
				opacity: 0;
			}
		}
		@keyframes showLayer {
			0% {
				transform: translateY(120%);
			}
			100% {
				transform: translateY(0%);
			}
		}
		@keyframes hideLayer {
			0% {
				transform: translateY(0);
			}
			100% {
				transform: translateY(120%);
			}
		}
	}
	.popup .layer{
		bottom: initial;
		top: 20%;
		padding: 0 13%;
		min-height: initial;
		background: inherit;
	}
	.out-style{
		background: #FFFFFF;
		padding: 20px 0;
	}
	.code-style{
		border: 20px solid #fff;
		border-radius: 15px;
	}
	.qrcode-item {
		font-size: 0.75rem;
		display: flex;
		justify-content: center;
	}
	.order-item .goods-box-single .right{
		padding-top: 10px;
	}
	.order-info{
		width: 100%;
		background: #FFFFFF;
	}
	.goods-section {
		margin-top: 16upx;
		background: #fff;
		padding-bottom: 1px;

		.g-header {
			display: flex;
			align-items: center;
			height: 84upx;
			padding: 0 30upx;
			position: relative;
		}

		.logo {
			display: block;
			width: 50upx;
			height: 50upx;
			border-radius: 100px;
		}

		.name {
			font-size: 30upx;
			color: $font-color-base;
			margin-left: 24upx;
		}

		.g-item {
			display: flex;
			margin: 20upx 30upx;
			padding-top: 20upx;

			image {
				flex-shrink: 0;
				display: block;
				width: 140upx;
				height: 140upx;
				border-radius: 4upx;
			}

			.right {
				flex: 1;
				padding-left: 24upx;
				overflow: hidden;
			}

			.title {
				font-size: 30upx;
				color: $font-color-dark;
			}

			.spec {
				font-size: 26upx;
				color: $font-color-light;
			}

			.price-box {
				display: flex;
				align-items: center;
				font-size: 30upx;
				color: $font-color-dark;
				padding-top: 10upx;

				.price {
					margin-bottom: 4upx;
					color: #fa436a;
				}
				.number {
					font-size: 26upx;
					color: $font-color-base;
					margin-left: 20upx;
				}
			}

			.step-box {
				position: relative;
			}
		}
	}
	.listTitle {
		margin: 10px 0;
	}

	.image {
		margin-bottom: 10px;
		display: flex;
		align-items: center;

		image {
			width: 60px;
			height: 60px;
			margin-right: 10px;
		}
	}

	.listShop {
		width: 100%;
		text-align: right;
		font-size: 13px;
		color: #909399;
		margin:{
			top: 20upx;
			right: 20upx;
		}

		view{
			margin-bottom: 20upx;
		}

		.num {
			color: #fa436a;
		}
	}

	.ellipsis {
		color: #909399;
	}

.order-list .order-item:last-child{
	margin-bottom: 50px;
}
</style>
